{extend name="public:base" /}
{block name="action"}
<button type="button" class="btn btn-w-m btn-primary add"><i class="fa  fa-plus"></i>添加</button>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight" xmlns="http://www.w3.org/1999/html">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <form method="get">
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input placeholder="分类名称搜索" value="{$params['query']}" name="query" type="text"
                                           class="form-control form-control-sm">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-search"></i>搜索</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox-content">

                    <div class="table-responsive">
                        <table class="table table-striped datalist-table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {notempty name="list"}
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.id}</td>
                                <td>{$vo.name}</td>
                                <td>{$vo.create_time}</td>
                                <td class="project-actions">
                                    <button class="btn btn-warning btn-sm edit-btn" data-id="{$vo.id}">
                                        <i class="fa fa-edit"></i> 编辑
                                    </button>
                                    <a href="{:url('delete', ['id' => $vo['id']])}"
                                       class="btn btn-danger btn-sm ajax-del"><i class="fa fa-trash-o"></i> 删除 </a>
                                </td>
                            </tr>
                            {/volist}
                            {/notempty}
                            </tbody>
                        </table>
                        {$list->render()}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template>

    </template>
</div>
{/block}
{block name="js"}
<script type="text/javascript">
    $(document).ready(function () {
        $(".menu-actions").on("click", ".add", function (e) {
            new ModalDialog({
                title: "添加分类",
                content: '<form class="" action="{:url(\'add\')}">\n' +
                    '            <div class="row">\n' +
                    '                <div class="modal-body">\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label>分类名称</label>\n' +
                    '                        <input type="text" name="name" value="" class="form-control required-validate" placeholder="请输入分类名称">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </form>',
                success: function (data, dialog) {
                    var index = layer.load(2, {shade: false});
                    $.ajax({
                        url: "{:url(\'add\')}?",
                        type: "post",
                        data: data,
                        success: function (res) {
                            toast.success(res.msg, {duration: res.wait * 1000}).then(() => {
                                dialog.close();
                                window.location.reload();
                            });
                        },
                        error: function (err) {
                            layer.close(index);
                            dialog.close();
                            toast.error(res.msg, {duration: res.wait * 1000});
                        }
                    });
                }
            }).show();
        });
        $(".datalist-table").on("click", ".edit-btn", function (e) {
            loadingDetail($(e.currentTarget).data("id")).then(data => {
                new ModalDialog({
                    title: "编辑",
                    content: '<form class="" action="{:url(\'edit\')}">\n' +
                        '            <div class="row">\n' +
                        '                <div class="modal-body">\n' +
                        '                    <div class="form-group">\n' +
                        '                        <label>分类名称</label>\n' +
                        '                        <input type="hidden" name="id" value="' + data.data.id + '" class="form-control">\n' +
                        '                        <input type="text" name="name" value="' + data.data.name + '" class="form-control required-validate" placeholder="请输入分类名称">\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </form>',
                    success: function (data, dialog) {
                        var index = layer.load(2, {shade: false});

                        $.ajax({
                            url: "{:url(\'edit\')}?",
                            type: "post",
                            data: data,
                            success: function (res) {
                                toast.success(res.msg, {duration: res.wait * 1000}).then(() => {
                                    dialog.close();
                                    window.location.reload();
                                });
                            },
                            error: function (err) {
                                layer.close(index);
                                dialog.close();
                                toast.error(res.msg, {duration: res.wait * 1000});
                            }
                        });
                    }
                }).show();
            });
        })

        function loadingDetail(id) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "{:url('show')}?id=" + id,
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        resolve(res);
                    },
                    error: function (err) {
                        reject(err);
                    }
                });
            })
        }
    });
</script>
{/block}